<template>
  <div>
    <table border="1" cellspacing="0" width="80%">
      <thead>
      <tr>
        <th>商品名</th>
        <th>产地</th>
        <th>单价</th>
        <th>数量</th>
        <th>总价</th>
        <th>类别</th>
        <th>操作</th>
      </tr>
      </thead>

      <tbody>
      <tr v-for="product in productList">
        <td>{{ product.name }}</td>
        <td>{{ product.factory }}</td>
        <td>{{ product.price }}</td>
        <td><input type="number" v-model="product.num"></td>
        <td>{{ product.price * product.num }}</td>
        <td>{{ product.type }}</td>
        <td><input type="button" value="删除" @click="del(product.id)">
          <input type="button" value="修改" @click="findById(product.id)">
        </td>
      </tr>
      </tbody>
      <input type="button" v-for="page in pages" :key="page" :value="page" @click="findByItem(page)">
      <input type="button" value="添加" @click="addVisible=true">
    </table>
    <div>
      购物车总价：{{ totalPrice }}
    </div>

    <div class="dialogDiv" v-if="addVisible">
      <div class="content">
        编号：<input type="text" v-model="addObj.id"><br>
        商品名字：<input type="text" v-model="addObj.name"><br>
        产地：<input type="text" v-model="addObj.factory"><br>
        单价：<input type="text" v-model="addObj.price"><br>
<!--        <input type="hidden" v-model\-->
        类别：
        <select v-model="addObj.type">
          <option value="电器">电器</option>
          <option value="食物">食物</option>
          <option value="数码">数码</option>
        </select>
        <input type="button" value="添加" @click="addProduct()">

      </div>
    </div>

    <div class="dialogDiv" v-if="updateVisible">
      <div class="content">
        编号：{{ updateObj.id }}<br>
        商品名：{{ updateObj.name }}<br>
        产地：{{ updateObj.factory }}<br>
        单价：<input type="text" v-model="updateObj.price"><br>
        类别：{{ updateObj.type }}<br>
        <input type="button" value="修改" @click="update()">
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      addVisible: false,
      pages: 5,
      addObj: {},
      updateObj: {},
      updateVisible: false,
      productList: [
        {"id": 1, "name": "电饭煲", factory: "深圳", price: 500, num: 1, type: "电器"},
        {"id": 2, "name": "钟薛高", factory: "北京", price: 198, num: 1, type: "食品"},
        {"id": 3, "name": "投影仪", factory: "深圳", price: 6500, num: 1, type: "电器"},
        {"id": 4, "name": "苹果机", factory: "深圳", price: 9800, num: 1, type: "数码"},
        {"id": 5, "name": "iPad", factory: "深圳", price: 7500, num: 1, type: "数码"},
        {"id": 6, "name": "薯片", factory: "成都", price: 20, num: 1, type: "食品"},
        {"id": 7, "name": "汉堡", factory: "上海", price: 28, num: 1, type: "食品"},
      ]
    }
  },
  methods: {
    addProduct() {
      this.productList.push(this.addObj)
      this.addVisible = false;
    },

    del(id) {
      //找到指定编号对应的下标
      var index = this.productList.findIndex(n => n.id === id);
      this.productList.splice(index, 1);
    },
    findById(id) {
      this.updateObj = this.productList.find(n => n.id === id);
      this.updateVisible = true;
    },
    update() {
      this.updateVisible = false;
      this.updateObj = {};
    },
    findByItem(page){
      alert(page)
    }
  },
  computed: {
    totalPrice() {
      var total = 0;
      this.productList.forEach(n => {
        total += n.price * n.num;
      });
      return total;
    }
  },
  name: "product"
}
</script>

<style scoped>

.dialogDiv {
  width: 100%;
  height: 100%;
  background: rgba(255, 0, 0, 0.5);
  display: flex;
  position: absolute;
  left: 0;
  top: 0;
  justify-content: center;
  align-content: center;
}

.content {
  width: 600px;
  height: 400px;
  background: white;
  border: 1px solid black;
}
</style>